<template>
  <div class="continua">
    <div class="content">
      <h3>我是父组件App(爷爷):{{ token }}</h3>
      <p>age:{{ age }}</p>
      <hr/>
      <One/>
      <hr/>
      <Two />
    </div>
  </div>
</template>

<script setup>
import {ref, provide, inject} from "vue";
import One from "@/components/05组件通讯/06- provide和inject/one.vue";
import Two from "@/components/05组件通讯/06- provide和inject/two.vue";

const age = ref(100);
const token = ref("appToken");
// 第一个参数是标识，第二个参数是数据状态
provide("t", token);// 提供数据，让自己所包裹的组件（可以隔代）使用。
provide("age", age);// 提供数据，让自己所包裹的组件（可以隔代）使用。
</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
